<template>
    <div style="margin: 0px auto">
        <span style="font-weight: bold;font-size: 20px;margin:0px 0px 50px 150px">分类管理</span>
        <el-tabs v-model="activeName" @tab-click="handleClick" style="width: 500px;margin-top: 30px">
            <el-tab-pane label="一级分类" name="first">
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        max-height="250"
                        @cell-click="resetChecked()"
                        @row-click="getDetails">
                    <el-table-column
                            fixed
                            prop="id"
                            label="ID"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="分店ID"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="classonename"
                            label="分类名称"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            width="120">
                        <template slot-scope="scope">
                            <el-button
                                    @click.native.prevent="getremove(scope.$index,scope.row)"
                                    type="text"
                                    size="small">
                                移除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="二级分类" name="second">
                <el-table
                        :data="tableDatatwo"
                        style="width: 100%"
                        max-height="250"
                        @cell-click="resetCheckedtwo()"
                        @row-click="getclasstwo">
                    <el-table-column
                            fixed
                            prop="id"
                            label="ID"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="分店ID"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="classtwoname"
                            label="分类名称"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            width="120">
                        <template slot-scope="scope">
                            <el-button
                                    @click.native.prevent="getdelete(scope.$index, scope.row)"
                                    type="text"
                                    size="small">
                                移除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="三级分类" name="third">
                <el-table
                        :data="tableDatathree"
                        style="width: 100%"
                        max-height="250">
                    <el-table-column
                            fixed
                            prop="id"
                            label="ID"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="分店ID"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="classthreename"
                            label="分类名称"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            width="120">
                        <template slot-scope="scope">
                            <el-button
                                    @click.native.prevent="getdeleteRow(scope.$index, scope.row)"
                                    type="text"
                                    size="small">
                                移除
                            </el-button>
                            <el-button
                                    @click.native.prevent="Clicktoreload()"
                                    type="text"
                                    size="small">
                                返回
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="添加" name="fourth">
                <el-button type="primary" @click="dialogFormVisible=true">添加一级分类</el-button>
                <el-button type="primary" @click="dialogFormVisibletwo=true">添加二级分类</el-button>
                <el-button type="primary" @click="dialogFormVisiblethree=true">添加三级分类</el-button>
            </el-tab-pane>
        </el-tabs>

        <el-dialog title="添加一级分类" :visible.sync="dialogFormVisible">
            <el-form :model="storeid" :rules="rules" ref="storeid" label-width="100px" class="demo-ruleForm">

                <el-form-item label="分店ID">
                    <el-select v-model="storeid.id" placeholder="请选择" style="width: 300px">
                        <el-option
                                v-for="item in storeid"
                                :key="item.value"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分类名称" prop="classonename">
                    <el-input type="textarea" v-model="classonename"></el-input>
                </el-form-item>
                <el-form-item style="margin-left: 100px">
                    <el-button type="primary" @click="getappend()">立即添加</el-button>
                    <el-button @click="dialogFormVisible=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog title="添加二级分类" :visible.sync="dialogFormVisibletwo">
            <el-form :model="tableData" :rules="rules" ref="tableData" label-width="100px" class="demo-ruleForm">

                <el-form-item label="分店ID">
                    <el-select v-model="storeids.id" placeholder="请选择" style="width: 300px" @change="getpitch()">
                        <el-option
                                v-for="item in storeids"
                                :key="item.value"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="一级分类名字">
                    <el-select v-model="tableDatas.classone" placeholder="请选择" style="width: 300px">
                        <el-option
                                v-for="item in tableDatas"
                                :key="item.value"
                                :label="item.classonename"
                                :value="item.classone">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分类名称" prop="classonename">
                    <el-input type="textarea" v-model="classonename"></el-input>
                </el-form-item>
                <el-form-item style="margin-left: 100px">
                    <el-button type="primary" @click="getappendtwo()">立即添加</el-button>
                    <el-button @click="dialogFormVisibletwo=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog title="添加三级分类" :visible.sync="dialogFormVisiblethree">
            <el-form :model="tableData" :rules="rules" ref="tableData" label-width="100px" class="demo-ruleForm">

                <el-form-item label="分店ID">
                    <el-select v-model="storeids.id" placeholder="请选择" style="width: 300px" @change="getpitch()">
                        <el-option
                                v-for="item in storeids"
                                :key="item.value"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="一级分类名字">
                    <el-select v-model="tableDatas.classone" placeholder="请选择" style="width: 300px"
                               @change="getpitchtwo()">
                        <el-option
                                v-for="item in tableDatas"
                                :key="item.value"
                                :label="item.classonename"
                                :value="item.classone">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="二级分类名字">
                    <el-select v-model="tableDatatwos.classone" placeholder="请选择" style="width: 300px">
                        <el-option
                                v-for="item in tableDatatwos"
                                :key="item.value"
                                :label="item.classtwoname"
                                :value="item.classone">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="分类名称" prop="classonename">
                    <el-input type="textarea" v-model="classonename"></el-input>
                </el-form-item>
                <el-form-item style="margin-left: 100px">
                    <el-button type="primary" @click="getappendthree()">立即添加</el-button>
                    <el-button @click="dialogFormVisiblethree=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "gathercommodity",
        data() {
            return {
                activeName: 'first',
                tableData: [],
                tableDatas: [{
                    id: '',
                    storeid: '',
                    classone: '',
                    classonename: ''
                }],
                tableDatatwo: [],
                tableDatatwos: [{
                    id: '',
                    storeid: '',
                    classone: '',
                    classtwo: '',
                    classonename: ''
                }],
                tableDatathree: [],
                storeid: [{
                    id: '',
                    name: '',
                    region: ''
                }],
                storeids: [{
                    id: '',
                    name: '',
                    region: ''
                }],
                classoneid: '',
                classtwoid: '',
                input: '',
                value: '',
                value1: '',
                dialogFormVisible: false,
                dialogFormVisibletwo: false,
                dialogFormVisiblethree: false,
                classonename: '',
                id: null,
                one: null,
            };
        },
        methods: {
            //点击获取获取二级分类
            getDetails(row) {
                var one = row.classone;
                var stoid = row.storeid;
                this.axios.get("/Classification/QueryClasstwo", {
                    params: {
                        storeid: stoid,
                        classone: one
                    }
                }).then(response => {
                    if (response.data == null) {
                        this.$alert("一级分类ID为空")
                    } else {
                        this.tableDatatwo = response.data;

                    }
                })
            },
            //点击获取获取三级分类
            getclasstwo(row) {
                var two = row.classtwo;
                var storid = row.storeid;
                this.axios.get("/Classification/QueryClassthree", {
                    params: {
                        storeid: storid,
                        classtwo: two
                    }
                }).then(response => {
                    if (response.data == null) {
                        this.$alert("一级分类ID为空")
                    } else {
                        this.tableDatathree = response.data;
                    }
                })
            },
            //添加一级分类
            getappend() {
                var obj = this.storeid.find((item) => {
                    return item.id == this.storeid.id;
                });
                this.axios.get("/Classification/InsClassone", {
                    params: {
                        storeid: obj.id,
                        classonename: this.classonename
                    }
                }).then(response => {
                    if (response.data == null) {
                        this.$alert("一级分类ID为空")
                    } else {
                        this.$alert("添加成功!")
                        this.dialogFormVisible = false;
                    }
                })
            },
            //根据店铺ID查询一级分类名称
            getpitch() {
                var obj = this.storeids.find((item) => {
                    return item.id == this.storeids.id;
                });
                this.axios.post("/Classification/QueryClassone", obj.id).then(response => {
                    if (response.data == null) {
                        this.$alert("根据店铺ID查询一级分类为空")
                    } else {
                        this.tableDatas = response.data;
                    }
                });
            },
            //添加二级分类
            getappendtwo() {
                var stoss = this.storeids.find((item) => {
                    return item.id == this.storeids.id;
                });
                var obj = this.tableDatas.find((item) => {
                    return item.classone == this.tableDatas.classone;
                });
                this.axios.get("/Classification/InsClasstwo", {
                    params: {
                        storeid: stoss.id,
                        classone: obj.classone,
                        classtwoname: this.classonename
                    }
                }).then(response => {
                    if (response.data == null) {
                        this.$alert("这个一级分类下没有二级分类");
                    } else {
                        this.$alert("添加成功!")
                        this.dialogFormVisibletwo = false;
                    }
                })
            },
            //根据一级分类拿到二级分类
            getpitchtwo() {
                var obj = this.storeids.find((item) => {
                    return item.id == this.storeids.id;
                });
                var objtwo = this.tableDatas.find((item) => {
                    return item.classone == this.tableDatas.classone;
                });
                this.axios.get("/Classification/QueryClasstwo", {
                    params: {
                        storeid: obj.id,
                        classone: objtwo.classone
                    }
                }).then(response => {
                    if (response.data == null) {
                        this.$alert("这个二级分类下没有三级分类")
                    } else {
                        this.tableDatatwos = response.data;
                    }
                });
            },
            //添加三级分类
            getappendthree() {
                var obj = this.storeids.find((item) => {
                    return item.id == this.storeids.id;
                });
                var objtwo = this.tableDatas.find((item) => {
                    return item.classone == this.tableDatas.classone;
                });
                var objthree = this.tableDatatwos.find((item) => {
                    return item.classone == this.tableDatatwos.classone;
                });
                this.axios.get("/Classification/InsClassthree", {
                    params: {
                        storeid: obj.id,
                        classone: objtwo.classone,
                        classtwo: objthree.classtwo,
                        classthreename: this.classonename
                    }
                }).then(response => {
                    if (response.data == null) {
                        this.$alert("添加失败");
                    } else {
                        this.$alert("添加成功");
                        this.dialogFormVisiblethree = false;
                    }
                });
            },
            //删除一级方法
            getremove(index, row) {
                this.$confirm('此操作将永久删除该文件，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.id = row.storeid;
                    this.one = row.classone;
                    this.axios.get("/Classification/DelClassone", {
                        params: {
                            classone: this.one,
                            storeid: this.id
                        }
                    }).then(response => {
                        if (response.data != null) {
                            this.$message({
                                type: 'success',
                                message: '删除成功'
                            });
                            this.axios.post("/Classification/QueryClass").then(response => {
                                if (response.data == null) {
                                    this.$alert("一级分类为空")
                                } else {
                                    this.tableData = response.data;
                                }
                            });
                        }
                    });
                }).catch(() => {
                    alert("删除失败了")
                    this.$message({
                        type: 'info',
                        message: '已经取消删除'
                    })
                })
            },
            //删除二级分类
            getdelete(index, row) {
                this.$confirm('此操作将永久删除该文件，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.id = row.storeid;
                    this.one = row.classtwo;
                    alert(this.id);
                    alert(this.one);
                    this.axios.get("/Classification/DelClasstwo", {
                        params: {
                            classtwo: this.one,
                            storeid: this.id
                        }
                    }).then(response => {
                        if (response.data != null) {
                            this.$message({
                                type: 'success',
                                message: '删除成功'
                            });
                            this.axios.post("/Classification/QueryClasstwos").then(response => {
                                if (response.data == null) {
                                    this.$alert("二级分类为空")
                                } else {
                                    this.tableDatatwo = response.data;
                                }
                            });
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已经取消删除'
                    })
                })
            },
            //删除三级分类
            getdeleteRow(index, row) {
                this.$confirm('此操作将永久删除该文件，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.id = row.storeid;
                    this.one = row.classthree;
                    this.axios.get("/Classification/DelClassthree", {
                        params: {
                            classthree: this.one,
                            storeid: this.id
                        }
                    }).then(response => {
                        if (response.data != null) {
                            this.$message({
                                type: 'success',
                                message: '删除成功'
                            });
                            this.axios.post("/Classification/QueryClassthrees").then(response => {
                                if (response.data == null) {
                                    this.$alert("三级分类为空")
                                } else {
                                    this.tableDatathree = response.data;
                                }
                            });
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已经取消删除'
                    })
                })
            },
            //点击一级跳转二级方法
            resetChecked() {
                this.activeName = 'second';
            },
            //点击二级跳转三级
            resetCheckedtwo() {
                this.activeName = 'third';
            },
            //点击重新加载
            Clicktoreload() {
                if (this.activeName == 'third') {
                    this.activeName = 'second'
                }
                //查询一级分类
                this.axios.post("/Classification/QueryClass").then(response => {
                    if (response.data == null) {
                        this.$alert("一级分类为空")
                    } else {
                        this.tableData = response.data;
                    }
                });
                //查询二级分类
                this.axios.post("/Classification/QueryClasstwos").then(response => {
                    if (response.data == null) {
                        alert("二级分类为空")
                    } else {
                        this.tableDatatwo = response.data;
                    }
                });
                //查询三级分类
                this.axios.post("/Classification/QueryClassthrees").then(response => {
                    if (response.data == null) {
                        this.$alert("三级分类为空")
                    } else {
                        this.tableDatathree = response.data;
                    }
                });
            }
        },
        created() {
            //查询分店ID
            this.axios.post("/Stores/QueryAllStores").then(response => {
                if (response.data == null) {
                    this.$alert("分店ID为空")
                } else {
                    this.storeid = response.data;
                    this.storeids = response.data;
                }
            });
            //查询一级分类
            this.axios.post("/Classification/QueryClass").then(response => {
                if (response.data == null) {
                    this.$alert("一级分类为空")
                } else {
                    this.tableData = response.data;
                }
            });
            //查询二级分类
            this.axios.post("/Classification/QueryClasstwos").then(response => {
                if (response.data == null) {
                    this.$alert("二级分类为空")
                } else {
                    this.tableDatatwo = response.data;
                }
            });
            //查询三级分类
            this.axios.post("/Classification/QueryClassthrees").then(response => {
                if (response.data == null) {
                    this.$alert("三级分类为空")
                } else {
                    this.tableDatathree = response.data;
                }
            });
        }
    }
</script>

<style scoped>
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>